// 抽象面板集中管理

Ext.ns('App.property');

App.property.AbstractPropertyPanel = Ext.extend(Ext.Panel, {
			title : '属性面板',
			iconCls : 'tb-prop',
			layout : 'fit',
			split : true,

			initComponent : function() {
				var tabPanel = new Ext.TabPanel({
							enableTabScroll : true,
							layoutOnTabChange : true,
							defaults : {
								autoScroll : true
							}
						});
				this.tabPanel = tabPanel;
				this.items = [tabPanel];
				App.property.AbstractPropertyPanel.superclass.initComponent.call(this);
			},

			setPropertyManager : function(propertyManager) {
				this.propertyManager = propertyManager;
			},

			getTabPanel : function() {
				return this.tabPanel;
			},

			hide : function() {
				this.clearItem(this.tabPanel);
				App.property.AbstractPropertyPanel.superclass.hide.call(this);
			},

			clearItem : function(p) {
				if (typeof p.items != 'undefined') {
					var item = null;
					while ((item = p.items.last())) {
						p.remove(item, true);
					}
				}
			}
		});
Ext.ns('App.property');

App.property.PropertyManager = Ext.extend(Object, {
			constructor : function() {
				this.leftPanel = new App.property.LeftPanel();
				this.leftPanel.setPropertyManager(this);
				this.leftPanel.show();
				if (this.form) {
					this.form.decorate(this.leftPanel.getTabPanel(), this.model);
				}

				if (this.leftPanel.ownerCt) {
					this.leftPanel.ownerCt.doLayout();
				}

				this.initMap();
			},
			getLeft:function(){
				return this.leftPanel;
			},
			getSelectionListener : function() {
				return this.selectionListener;
			},

			initMap : function() {
				this.formMap = {
					process : App.form.ProcessForm,
					start : App.form.StartForm,
					end : App.form.EndForm,
					fork : App.form.ForkForm,
					join : App.form.JoinForm,
					transition : App.form.TransitionForm,
					auto : App.form.AutoForm
				};
			},

			updateForm : function(model) {
				this.model = model;
				var modelType = model.getType();
				var constructor = this.formMap[modelType];
				if (!constructor) {
					Gef.debug('cannot find form for [' + modelType + ']', 'App.property.PropertyManager.updateForm()');
				}
				this.form = new constructor;
				this.form.decorate(this.leftPanel.getTabPanel(), model);
			},

			initSelectionListener : function(editor) {
				this.selectionListener = new Gef.jbs.ExtSelectionListener(this);
				editor.addSelectionListener(this.selectionListener);
				this.selectionListener.setEditor(editor);

				var model = this.selectionListener.getModel();
				this.updateForm(model);
			}
		});

Ext.ns('App.property');

//创建左边区域
App.property.LeftPanel = Ext.extend(App.property.AbstractPropertyPanel, {
			region : 'west',
			width : 300
		});

//创建画板区域
App.CanvasPanel = Ext.extend(Ext.Panel, {
	        //初始化设定，设置顶端工具条
			initComponent : function() {
				this.region = 'center';
				this.autoScroll = true;
				this.tbar = new Ext.Toolbar([{
									text : '新建',
									iconCls : 'tb-new',
									id:'_Gef_tbar_1',
									hidden:!Gef.editable,
									handler : function() {
										Gef.activeEditor.reset();
									}
								}, {
									text : '导入',
									id:'_Gef_tbar_2',
									hidden:!Gef.editable,
									iconCls : 'tb-webform',
									handler : function() {
										var xml = Gef.activeEditor.serial();
										if (!this.openWin) {
											this.openWin = new Ext.Window({
														title : 'xml',
														layout : 'fit',
														width : 500,
														height : 300,
														closeAction : 'hide',
														modal : true,
														items : [{
																	id : '__gef_jbpm4_xml_import__',
																	xtype : 'textarea'
																}],
														buttons : [{
																	text : '导入',
																	handler : function() {
																		var xml = Ext.getDom('__gef_jbpm4_xml_import__').value;
																		Gef.activeEditor.resetAndOpen(xml);
																		this.openWin.hide();
																	},
																	scope : this
																}, {
																	text : '取消',
																	handler : function() {
																		this.openWin.hide();
																	},
																	scope : this
																}]
													});
											this.openWin.on('show', function() {
														Gef.activeEditor.disable();
													});
											this.openWin.on('hide', function() {
														Gef.activeEditor.enable();
													});
										}
										this.openWin.show(null, function() {
													Ext.getDom('__gef_jbpm4_xml_import__').value = xml;
												});
									}
								}, {
									text : '导出',
									id:'_Gef_tbar_3',
									hidden:!Gef.editable,
									iconCls : 'tb-prop',
									handler : function() {
										var xml = Gef.activeEditor.serial();
										if (!this.openWin) {
											this.openWin = new Ext.Window({
														title : 'xml',
														layout : 'fit',
														width : 500,
														height : 300,
														closeAction : 'hide',
														modal : true,
														items : [{
																	id : '__gef_jbpm4_xml_export__',
																	xtype : 'textarea'
																}],
														buttons : [{
																	text : '关闭',
																	handler : function() {
																		this.openWin.hide();
																	},
																	scope : this
																}]
													});
											this.openWin.on('show', function() {
														Gef.activeEditor.disable();
													});
											this.openWin.on('hide', function() {
														Gef.activeEditor.enable();
													});
										}
										this.openWin.show(null, function() {
													Ext.getDom('__gef_jbpm4_xml_export__').value = xml;
												});
									}
								}, {
									text : '保存',
									id:'_Gef_tbar_4',
									hidden:!Gef.editable,
									iconCls : 'tb-save',
									handler : function() {
										var editor = Gef.activeEditor;
										var xml = editor.serial();
										var name = editor.getGraphicalViewer().getContents().getModel().text;
										Ext.Msg.wait('正在保存');
										Ext.Ajax.request({
													method : 'post',
													url : Gef.SAVE_URL,
													success : function(response) {
														try {
															var o = Ext.decode(response.responseText);
															if (o.success === true) {
																Ext.Msg.alert('信息', '操作成功');
															} else {
																Ext.Msg.alert('错误', o.errors.msg);
															}
														} catch (e) {
															Ext.Msg.alert('系统错误', response.responseText);
														}
													},
													failure : function(response) {
														Ext.Msg.alert('系统错误', response.responseText);
													},
													params : {
														id : Gef.PROCESS_ID,
														processName : name,
														xml : xml
													}
												});
									}
								}, {
									text : '发布',
									id:'_Gef_tbar_5',
									hidden:!Gef.editable,
									iconCls : 'tb-deploy',
									handler : function() {
										var editor = Gef.activeEditor;

										var isValid = new Validation(editor).validate();
										if (!isValid) {
											return false;
										}

										var xml = editor.serial();
										var model = editor.getGraphicalViewer().getContents().getModel();
										var name = model.text;
										Ext.Msg.wait('正在发布');
										Ext.Ajax.request({
													method : 'post',
													url : Gef.DEPLOY_URL,
													success : function(response) {
														try {
															var o = Ext.decode(response.responseText);
															if (o.success === true) {
																Ext.Msg.alert('信息', '操作成功');
															} else {
																Ext.Msg.alert('错误', o.errors.msg);
															}
														} catch (e) {
															Ext.Msg.alert('系统错误', response.responseText);
														}
													},
													failure : function(response) {
														Ext.Msg.alert('系统错误', response.responseText);
													},
													params : {
														id : Gef.PROCESS_ID,
														procCatId : model.procCatId,
														procDefName : model.procDefName,
														procDefCode : model.procDefCode,
														procVerName : model.procVerName,
														xml : xml
													}
												});
									}
								}, {
									text : '清空',
									id:'_Gef_tbar_6',
									hidden:!Gef.editable,
									iconCls : 'tb-clear',
									handler : function() {
										Gef.activeEditor.clear();
									}
								}, {
									text : '撤销',
									id:'_Gef_tbar_7',
									hidden:!Gef.editable,
									iconCls : 'tb-undo',
									handler : function() {
										var viewer = Gef.activeEditor.getGraphicalViewer();
										var browserListener = viewer.getBrowserListener();
										var selectionManager = browserListener.getSelectionManager();
										selectionManager.clearAll();
										var commandStack = viewer.getEditDomain().getCommandStack();
										commandStack.undo();
									},
									scope : this
								}, {
									text : '重做',
									id:'_Gef_tbar_8',
									hidden:!Gef.editable,
									iconCls : 'tb-redo',
									handler : function() {
										var viewer = Gef.activeEditor.getGraphicalViewer();
										var browserListener = viewer.getBrowserListener();
										var selectionManager = browserListener.getSelectionManager();
										selectionManager.clearAll();
										var commandStack = viewer.getEditDomain().getCommandStack();
										commandStack.redo();
									},
									scope : this
								}, {
									text : '删除',
									id:'_Gef_tbar_9',
									hidden:!Gef.editable,
									iconCls : 'tb-delete',
									handler : this.removeSelected,
									scope : this
								}, {
									text : '浏览模式',
									iconCls : 'tb-clear',
									id:'_Gef_tbar_10',
									hidden:!Gef.editable,
									handler : function(){
										App.eastPanel.collapse(true);
										for(var i=1;i<=10;i++){
											Ext.getCmp("_Gef_tbar_"+i).setVisible(false);
										}
										Ext.getCmp("_Gef_tbar_11").setVisible(true);
										Gef.editable=false;
										
										//Gef.activeEditor.disable();
										
										var trakers=Gef.activeEditor.getGraphicalViewer().getBrowserListener().trackers;
										var length=trakers.length,count=0;
										while(count<length){
											trakers.pop();
											count++;
										}
									},
									scope : this
								}, {
									text : '编辑模式',
									id:'_Gef_tbar_11',
									iconCls : 'tb-new',
									handler : function(){
										App.eastPanel.expand(false);
										for(var i=1;i<=10;i++){
											Ext.getCmp("_Gef_tbar_"+i).setVisible(true);
										}
										Ext.getCmp("_Gef_tbar_11").setVisible(false);
										Gef.editable=true;
										//Gef.activeEditor.enable();
										Gef.activeEditor.getGraphicalViewer().getBrowserListener().initTrackers();
										App.propertyManager.initSelectionListener(Gef.activeEditor);
									},
									scope : this
								}]);

				App.CanvasPanel.superclass.initComponent.call(this);
			},
			//渲染结束后创建画板，同时设置画板事件
			afterRender : function() {
				//创建画板区域
				App.CanvasPanel.superclass.afterRender.call(this);

				var width = 800;
				var height = 500;

				Ext.DomHelper.append(this.body, [{
									id : '__gef_jbs__',
									tag : 'div',
									style : 'width:' + (width + 10) + 'px;height:' + (height + 10) + 'px;',
									children : [{
												id : '__gef_jbs_center__',
												tag : 'div',
												style : 'width:' + width + 'px;height:' + height + 'px;float:left;'
											}, {
												id : '__gef_jbs_right__',
												tag : 'div',
												style : 'width:10px;height:' + height + 'px;float:left;background-color:#EEEEEE;cursor:pointer;'
											}, {
												id : '__gef_jbs_bottom__',
												tag : 'div',
												style : 'width:' + (width + 10) + 'px;height:10px;float:left;background-color:#EEEEEE;cursor:pointer;'
											}]
								}]);

				var rightEl = Ext.fly('__gef_jbs_right__');
				rightEl.on('mouseover', function(e) {
							var t = e.getTarget();
							t.style.backgroundColor = 'yellow';
							t.style.backgroundImage = 'url(images/flow/arrow-right.png)';
						});
				rightEl.on('mouseout', function(e) {
							var t = e.getTarget();
							t.style.backgroundColor = '#EEEEEE';
							t.style.backgroundImage = '';
						});
				rightEl.on('click', function(e) {
							Ext.fly('__gef_jbs__').setWidth(Ext.fly('__gef_jbs__').getWidth() + 100);
							Ext.fly('__gef_jbs_center__').setWidth(Ext.fly('__gef_jbs_center__').getWidth() + 100);
							Ext.fly('__gef_jbs_bottom__').setWidth(Ext.fly('__gef_jbs_bottom__').getWidth() + 100);

							Gef.activeEditor.addWidth(100);
						});

				var bottomEl = Ext.fly('__gef_jbs_bottom__');
				bottomEl.on('mouseover', function(e) {
							var t = e.getTarget();
							t.style.backgroundColor = 'yellow';
							t.style.backgroundImage = 'url(images/flow/arrow-bottom.png)';
						});
				bottomEl.on('mouseout', function(e) {
							var t = e.getTarget();
							t.style.backgroundColor = '#EEEEEE';
							t.style.backgroundImage = '';
						});
				rightEl.on('click', function(e) {
							Ext.fly('__gef_jbs__').setHeight(Ext.fly('__gef_jbs__').getHeight() + 100);
							Ext.fly('__gef_jbs_center__').setHeight(Ext.fly('__gef_jbs_center__').getHeight() + 100);
							Ext.fly('__gef_jbs_right__').setHeight(Ext.fly('__gef_jbs_right__').getHeight() + 100);

							Gef.activeEditor.addHeight(100);
						});

				this.body.on('contextmenu', this.onContextMenu, this);
			},
			//右键菜单项
			onContextMenu : function(e) {
				if (!this.contextMenu) {
					this.contextMenu = new Ext.menu.Menu({
								items : [{
											text : '详细配置',
											iconCls : 'tb-prop',
											handler : Gef.emptyFn,
											scope : this
										}, {
											text : '删除',
											iconCls : 'tb-remove',
											handler : this.removeSelected,
											scope : this
										}]
							});
				}
				e.preventDefault();
				this.contextMenu.showAt(e.getXY());
			},
			//删除选中的结点
			removeSelected : function() {
				var viewer = Gef.activeEditor.getGraphicalViewer();
				var browserListener = viewer.getBrowserListener();
				var selectionManager = browserListener.getSelectionManager();

				var edge = selectionManager.selectedConnection;
				var nodes = selectionManager.items;

				var request = {};

				if (edge != null) {
					request.role = {
						name : 'REMOVE_EDGE'
					};
					this.executeCommand(edge, request);
					selectionManager.removeSelectedConnection();
				} else if (nodes.length > 0) {
					request.role = {
						name : 'REMOVE_NODES',
						nodes : nodes
					};
					this.executeCommand(viewer.getContents(), request);
					selectionManager.clearAll();
				}
			},
			//执行删除操作
			executeCommand : function(editPart, request) {
				var command = editPart.getCommand(request);
				if (command != null) {
					Gef.activeEditor.getGraphicalViewer().getEditDomain().getCommandStack().execute(command);
				}
			}
		});
//创建右边的导航条
App.PalettePanel = Ext.extend(Ext.Panel, {
			initComponent : function() {
				this.region = 'east';
				this.collapsed=!Gef.editable;
				this.width = 110;
				this.initPalette();
				App.PalettePanel.superclass.initComponent.call(this);
			},

			initPalette : function() {
				var paletteType = 'fit';
				this.createItemsForAccordion();
			},

			createHtml : function(array, divId) {
				var imageRoot = "images/flow/";
				if (divId) {
					var html = '<div id="' + divId + '" unselectable="on">';
				} else {
					var html = '<div unselectable="on">';
				}

				for (var i = 0; i < array.length; i++) {
					var item = array[i];
					html += '<div id="' + item.name + '" class="paletteItem-' + item.name + '" style="text-align:center;font-size:12px;cursor:pointer;" unselectable="on"><img id="' + item.name + '-img" class="paletteItem-' + item.name + '" src="' + imageRoot + item.image + '.png" unselectable="on"><br>' + item.title + '</div>';
				}
				html += '</div>';

				return html;
			},

			createItemsForAccordion : function() {
				this.id = '__gef_jbs_palette__';

				this.items = [{
							title : '基本活动',
							iconCls : 'tb-activity',
							autoScroll : true,
							html : this.createHtml([{
										name : 'select',
										image : 'select32',
										title : '选择'
									}, {
										name : 'transition',
										image : 'flow_sequence',
										title : '连线'
									}, {
										name : 'start',
										image : 'start_event_empty',
										title : '开始'
									}, {
										name : 'end',
										image : 'end_event_terminate',
										title : '结束'
									}, {
										name : 'auto',
										image : 'task_empty',
										title : '自动'
									}, {
										name : 'fork',
										image : 'gateway_parallel',
										title : '并行'
									}, {
										name : 'join',
										image : 'gateway_parallel',
										title : '汇聚'
									}])
						}];
			}
		});

